<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- <el-row type="flex" justify="space-between">
          <el-button type="primary" size="small" @click="addPage">添加页面</el-button>
          <el-input v-model="value" class="inputone" placeholder="请输入关键字" />
          <el-button @click="search">筛选</el-button>
        </el-row> -->
        <PageTools>
          <template #before>
            <el-button type="primary" size="small" @click="addPage">添加页面</el-button>
          </template>
          <template #after>
            <!-- 后半部分 -->
            <el-input v-model="value" class="inputone" placeholder="请输入关键字" />
            <el-button @click="search">筛选</el-button>
          </template>
        </PageTools>
        <!-- 表格 -->
        <el-table
          :data="tableData"
          style="width: 100%"
          border
        >
          <el-table-column
            prop="title"
            label="标题"
          />
          <el-table-column
            prop="content"
            label="内容"
          >
            <template v-slot="{row}">
              <div v-html="row.content" />
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
          >
            <template v-slot="{row}">
              <el-button size="small" type="primary" @click="edit(row.id)">编辑</el-button>
              <el-button size="small" type="danger" @click="del(row.id)">删除</el-button>
            </template>

          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-row type="flex" justify="center">
          <el-pagination
            :page-size="2"
            layout="prev, pager, next"
            :total="total"
            @current-change="currentChange"
          />
        </el-row>
      </el-card>

      <!-- 添加页面框 -->
      <showDialog ref="form" :show-dialog.sync="showDialog" @update="getPagesList" />
    </div>
  </div>
</template>

<script>
import showDialog from './components/showDialog.vue'
import { getPages, getpagination, deletePages, getPageDetails } from '@/api/pages'

export default {
  components: { showDialog },
  data() {
    return {
      tableData: [],
      showDialog: false, // 控制dialog组件弹窗
      total: 0, // 页面总数量
      value: '', // 输入框的值
      list: {
        _limit: 2, // 每页的获取条数
        _start: 0, // 开始获取的位置
        title_contains: ''
      }
    }
  },
  created() {
    // 获取列表信息
    this.getPagesList()
    // 获取页面数量
  },
  methods: {
    async search() {
      // 渲染指定数据到table
      const result = await getPages({
        _limit: 2, // 每页的获取条数
        _start: 0, // 开始获取的位置
        title_contains: this.value
      })
      const pagtotal = await getpagination({
        title_contains: this.value
      })
      this.tableData = result.data
      this.total = pagtotal.data
    },
    // 获取页面列表信息
    async getPagesList() {
      const res = await getPages({
        _limit: this.list._limit, // 每页的获取条数
        _start: this.list._start // 开始获取的位置
      })

      // 获取页面数量
      const pagetotal = await getpagination()
      this.total = pagetotal.data
      // 保存列表信息
      this.tableData = res.data
      // console.log(84, this.tableData)
      // console.log(87, this.total)
    },
    currentChange(page) {
      this.list = {
        _limit: '2',
        _start: `${(page - 1) * 2}`,
        title_contains: ''

      }
      // 刷新列表
      this.getPagesList()
    },
    // 添加页面
    addPage() {
      // 显示弹窗
      this.showDialog = true
    },
    // 编辑
    async edit(id) {
      // 显示弹窗
      this.showDialog = true
      // 数据回显
      const res = await getPageDetails(id)
      this.$refs.form.formData = res.data
    },
    // 删除
    async del(id) {
      // 删除
      await deletePages(id)
      // 提示成功
      this.$message.success('删除成功')
      // 更新列表
      this.getPagesList()
    }
  }
}
</script>

<style lang='scss' scoped>

</style>
